<style>
    .basic-info{background-color: #fff;border:1px solid #ddd;padding: 15px;}
    .form-group{margin-top: 10px;}
    .form-control{display:inline;width: 12.9%;border-radius: 4px;}
    .form-group>label{margin-left: 40px;font-weight: 400;}
    #good_at{width: 576px;}
    .signature,.qualification{background-color: #fff;margin-top: 20px;border:1px solid #ddd;padding: 15px;}
    #img_add_btn_wrap,#img_add_btn_wrap_cer,#img_add_btn_wrap_figure{width: 100px;height: 100px;margin-left: 40px;margin-top: 10px; display:flex;justify-content: center;}
    #add_img_btn,#add_img_btn_cer,#add_img_btn_figure{width:100px;font-size: 15px;text-align: center;line-height: 9.5;background: silver;}
    .img-list-wrap,.img-list-wrap-cer,.img-list-wrap-figure{display: flex;justify-content:flex-start;}
    .img-list-item,.img-list-item-cer,.img-list-item-figure{margin-top: 10px;margin-left: 20px;text-align: center;}
    .img_list_del_btn,.img_list_del_btn_cer,.img_list_del_btn_figure{width:100px;font-size: 15px;color: red;text-align: center;}
</style>
<div class="basic-info">
    <div style="font-size: 16px;font-weight: 900;" class="">基本信息</div>
    <div class="form-group">
        <label for="txt_departmentname">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;姓 名&nbsp;&nbsp;&nbsp;&nbsp;：</label>
        <input class="form-control" type="text" name="name" id="name" readonly="readonly" value="@if(!empty($result->name)){{$result->name}}@endif">
        <label for="txt_departmentname">所属机构：</label>
        <input class="form-control" type="text" name="institution_id" readonly="readonly" id="institution_id" value="@if(!empty($result->institution_id)){{$result->institution_id}}@endif">
        {{--<select class="form-control default_insulin" name="institution_id" id="institution_id">--}}
            {{--<option value="0">请选择所属机构</option>--}}
        {{--</select>--}}
        <label for="txt_departmentname">所在科室：</label>
        <input class="form-control" type="text" name="department_id" readonly="readonly" id="department_id" value="@if(!empty($result->department_id)){{$result->department_id}}@endif">
        {{--<select class="form-control default_insulin" name="department_id" id="department_id">--}}
            {{--<option value="0">请选择所在科室</option>--}}
        {{--</select>--}}
        <label for="txt_departmentname">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;职 称&nbsp;&nbsp;&nbsp;&nbsp;：</label>
        <input class="form-control" type="text" name="position" id="position" readonly="readonly" value="@if(!empty($result->position)){{$result->position}}@endif">
    </div>
    <div class="form-group">
        <label for="txt_departmentname">联系电话：</label>
        <input class="form-control" type="text" name="title" name="contact" id="contact" value="@if(!empty($result->contact)){{$result->contact}}@endif">
        <label for="txt_departmentname">从业时间：</label>
        <input class="form-control" type="text" name="working_time" id="working_time" value="@if(!empty($result->working_time)){{$result->working_time}}@endif">
        <label for="txt_departmentname">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;标 签&nbsp;&nbsp;&nbsp;&nbsp;：</label>
        <input class="form-control" type="text" name="tag" id="tag" readonly="readonly" value="@if(!empty($result->tag)){{$result->tag}}@endif">
        {{--<select class="form-control default_insulin" name="tag" id="tag">--}}
            {{--<option value="0">请选择标签</option>--}}
            {{--<option value="1">三甲医院</option>--}}
            {{--<option value="2">二甲医院</option>--}}
            {{--<option value="3">快速回复</option>--}}
        {{--</select>--}}
    </div>
</div>
<div class="signature">
    <div style="font-size: 16px;font-weight: 900;">医学/教育背景介绍</div>
    <textarea rows="5" style="width: 77%;margin: 10px;" id="background" class="form-control">@if(!empty($result->background)){{$result->background}}@endif</textarea>
</div>
<div class="signature">
    <div style="font-size: 16px;font-weight: 900;">擅长领域</div>
    <textarea rows="5" style="width: 77%;margin: 10px;" id="good_at" class="form-control">@if(!empty($result->good_at)){{$result->good_at}}@endif</textarea>
</div>
<div class="signature">
    <div style="font-size: 16px;font-weight: 900;">形象照</div>
    <div class="img-list-wrap-figure">
        <div id="img_add_btn_wrap_figure"> <a id="add_img_btn_figure" href="javascript:void(0)"><i class="fa fa-plus-circle fa-5x"></i></a></div>
        @if(!empty($result->photo))
            <div class="img-list-item-figure"> <img width="100" height="100" src="{{$result->photo}}" /><br/><a class="img_list_del_btn_figure" href="javascript:void(0)" data_img="{{$result->photo}}">删除</a></div>
        @endif
    </div>
    <form method="post" id="form1" >
        <input type="file" name="photo" id="add_img_figure" style="display: none;"/>
    </form>
</div>
<div class="signature">
    <div style="font-size: 16px;font-weight: 900;">电子签名</div>
    <div class="img-list-wrap">
        <div id="img_add_btn_wrap"> <a id="add_img_btn" href="javascript:void(0)"><i class="fa fa-plus-circle fa-5x"></i></a></div>
        @if(!empty($result->signature))
            <div class="img-list-item"> <img width="100" height="100" src="{{$result->signature}}" /><br/><a class="img_list_del_btn" href="javascript:void(0)" data_img="{{$result->signature}}">删除</a></div>
        @endif
        {{--<div class="img-list-item img-list-item"> <img width="100" height="100" src="" /><br/><a class="img_list_del_btn" href="javascript:void(0)" operate-target="img-list-item">删除</a></div>--}}
    </div>
    <form method="post" id="form2" >
        <input type="file" name="photo" id="add_img" style="display: none;"/>
    </form>
</div>
<div class="qualification">
    <div style="font-size: 16px;font-weight: 900;">资质文件上传</div>
    <div class="img-list-wrap-cer">
        <div id="img_add_btn_wrap_cer"> <a id="add_img_btn_cer" href="javascript:void(0)"><i class="fa fa-plus-circle fa-5x"></i></a></div>
        @if(!empty($result->certificate))
            @foreach(explode(',',$result->certificate) as $key=>$value)
                <div class="img-list-item-cer"> <img width="100" height="100" src="{{$value}}" /><br/><a class="img_list_del_btn_cer" data_img="{{$value}}" href="javascript:void(0)">删除</a></div>
            @endforeach
        @endif
    </div>
    <form method="post" id="form3" >
        <input type="file" name="photo" id="add_img_cer" style="display: none;"/>
    </form>
</div>
<script>
    $(function(){
        //电子签名上传图片
        $('#add_img_btn').on('click',function () {
            var length = $('.img-list-wrap').children().length;
            if ( length >= 2 ) {
                layer.msg('签名已存在');return;
            }
            $('#add_img').click();
        });

        $('#add_img').on('change',function (e) {
            if($('#add_img').val()==''){
                return
            }
            var index = layer.load(0, {shade: '#ccc'}); //0代表加载的风格，支持0-2
            //loading层
            $('#form2').ajaxSubmit({type:'post',url:'/admin/shop/upload_loop_img',
                success:function (res) {
                    var html = "<div class=\"img-list-item\"> <img width=\"100\" height=\"100\" src=\""+ res.data +"\"\/><br\/><a class=\"img_list_del_btn\" data_img=\""+res.data+"\" href=\"javascript:void(0)\">删除<\/a><\/div>";
                    $('.img-list-wrap').append(html);
                    add_input_img({"field":"signature","value":res.data});
                    layer.close(index);
                }
            });
        });

        $(document).on('click','.img_list_del_btn',function (e) {
            var index = layer.load(0, {shade: '#ccc'});
            $(this).closest('.img-list-item').remove();
            add_input_img({"field":"signature","value":""});
            layer.close(index);
        });


        //资质文件
        $('#add_img_btn_cer').on('click',function () {
            $('#add_img_cer').click()
        });

        $('#add_img_cer').on('change',function (e) {
            if($('#add_img_cer').val()==''){
                return
            }
            var index = layer.load(0, {shade: '#ccc'}); //0代表加载的风格，支持0-2
            //loading层
            $('#form3').ajaxSubmit({type:'post',url:'/admin/shop/upload_loop_img',success:function (res) {
                    var html = "<div class=\"img-list-item-cer\"> <img width=\"100\" height=\"100\" src=\""+ res.data +"\"\/><br\/><a class=\"img_list_del_btn_cer\" data_img=\""+res.data+"\" href=\"javascript:void(0)\">删除<\/a><\/div>";
                    $('.img-list-wrap-cer').append(html);
                    add_input_img({"field":"certificate","value":res.data});
                    layer.close(index);
                }})
        });

        $(document).on('click','.img_list_del_btn_cer',function (e) {
            var index = layer.load(0, {shade: '#ccc'});
            var value = $(this).attr('data_img');
            $(this).closest('.img-list-item-cer').remove();
            add_input_img({"field":"certificate","value":value});
            layer.close(index);
        });


        //形象照片
        $('#add_img_btn_figure').on('click',function () {
            var length = $('.img-list-wrap-figure').children().length;
            if ( length >= 2 ) {
                layer.msg('形象照已存在');return;
            }
            $('#add_img_figure').click();
        });

        $('#add_img_figure').on('change',function (e) {
            if($('#add_img_figure').val()==''){
                return
            }
            var index = layer.load(0, {shade: '#ccc'}); //0代表加载的风格，支持0-2
            //loading层
            $('#form1').ajaxSubmit({type:'post',url:'/admin/shop/upload_loop_img',success:function (res) {
                    var html = "<div class=\"img-list-item-figure\"> <img width=\"100\" height=\"100\" src=\""+ res.data +"\"\/><br\/><a class=\"img_list_del_btn_figure\" data_img=\""+res.data+"\" href=\"javascript:void(0)\">删除<\/a><\/div>";
                    $('.img-list-wrap-figure').append(html);
                    add_input_img({"field":"photo","value":res.data});
                    layer.close(index);
                }})
        });

        $(document).on('click','.img_list_del_btn_figure',function (e) {
            var index = layer.load(0, {shade: '#ccc'});
            var value = $(this).attr('data_img');
            $(this).closest('.img-list-item-figure').remove();
            add_input_img({"field":"photo","value":""});
            layer.close(index);
        });

        //姓名
        $("#name").blur(function(){
            var index = layer.load(0, {shade: '#ccc'});
            var value = $(this).val();
            add_input_img({"field":"name","value":value});
            layer.close(index);
        });
        //联系电话
        $('#contact').blur(function () {
            var index = layer.load(0, {shade: '#ccc'});
            var value = $(this).val();
            add_input_img({"field":"contact","value":value});
            layer.close(index);
        });
        //擅长
        $('#good_at').blur(function () {
            var index = layer.load(0, {shade: '#ccc'});
            var value = $(this).val();
            add_input_img({"field":"good_at","value":value});
            layer.close(index);
        });
        //标签
        $('#tag').change(function () {
            var index = layer.load(0, {shade: '#ccc'});
            var value = $(this).val();
            add_input_img({"field":"tag","value":value});
            layer.close(index);
        });
        //教育背景
        $('#background').blur(function () {
            var index = layer.load(0, {shade: '#ccc'});
            var value = $(this).val();
            add_input_img({"field":"background","value":value});
            layer.close(index);
        });
        //从业时间
        $('#working_time').blur(function () {
            var index = layer.load(0, {shade: '#ccc'});
            var value = $(this).val();
            add_input_img({"field":"working_time","value":value});
            layer.close(index);
        });
        //职称
        $('#position').blur(function () {
            var index = layer.load(0, {shade: '#ccc'});
            var value = $(this).val();
            add_input_img({"field":"position","value":value});
            layer.close(index);
        });

        //添加
        function add_input_img(data) {
            $.ajax({
                url : "{{admin_url('doctor/add_field')}}",
                type:'post',
                dataType:'json',
                data:data,
                success:function(result){
                    if ( result.code != 0 ) {
                        layer.msg('操作失败')
                    }
                }
            });
        }
    });
</script>